<template>
  <el-dialog top="20vh" :title="title" v-model="visible" :close-on-press-escape="false" :close-on-click-modal="false"
    @closed="clear">
    <div class="autumn-container">
      <!-- 账户表格 -->
      <div class="autumn-center">
        <!-- 搜索栏 -->
        <div class="query-form">
          <autumn-search :formModel="queryInfo" @search="search">
            <template #default>
              <el-col :span="8">
                <el-form-item prop="category" label="分类">
                  <el-tree-select node-key="id" value-key="id" :props="{ label: 'name' }" :check-strictly="true"
                    :data="treeCategorys" v-model="queryInfo.category" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="code" label="商品">
                  <el-input v-model="queryInfo.code" placeholder="编码/名称" />
                </el-form-item>
              </el-col>
            </template>
          </autumn-search>
        </div>

        <div class="main-body">
          <autumn-table ref="mainTableRef" :height="200" :page="page" @changePage="search">
            <template #button>
              <el-button type="primary" size="small" @click="apply">确定</el-button>
              <el-button type="info" size="small" @click="close">取消</el-button>
            </template>
            <template #column>
              <el-table-column type="selection" label="#" fixed="left" width="50" align="center" v-if="multiple" />
              <el-table-column label="#" fixed="left" width="50" align="center" v-else>
                <template #default="scope">
                  <el-radio :label="scope.$index" v-model="radioIndex">
                    <span></span>
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column type="index" label="#" fixed="left" align="center">
                <template #default="scope">
                  {{ initIndex(scope.$index) }}
                </template>
              </el-table-column>
              <el-table-column prop="model" label="型号" />
              <el-table-column prop="unitPrice" label="售价" width="80" align="right" />
              <el-table-column prop="code" label="编码" />
              <el-table-column prop="name" label="名称" />
              <el-table-column prop="spec" label="规格" />
              <el-table-column prop="category" label="分类" align="center" width="100" />
              <el-table-column prop="createName" label="创建人" width="100" />
              <el-table-column prop="createTime" label="创建时间" align="center" width="150"
                :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
            </template>
          </autumn-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import hooks from 'src/hook/index'
import { $moment, $convertTree } from 'src/util/tools'
import { pageProductInfo } from 'src/api/metadata/productInfo'
import { listProductCategory } from 'src/api/metadata/productCategory'

// 查询商品分类
const treeCategorys = ref<Array<any>>([])
listProductCategory().then(({ data }) => {
  treeCategorys.value = $convertTree(data)
})

const props = defineProps({
  multiple: {
    type: Boolean,
    default() {
      return false
    }
  },
  title: {
    type: String,
    default() {
      return ''
    }
  },
  defaultValue: {
    type: [String, Array],
    default: () => ''
  }
})

// 弹出窗
const visible = ref<boolean>(false)
const open = function () {
  visible.value = true
  search()
}
const close = function () {
  visible.value = false
}
const clear = function () {
  radioIndex.value = -1
  Object.assign(queryInfo, {
    organId: '',
    name: '',
    isEnable: '1'
  })
  search()
  mainTableRef.value.$refs.dataTableRef.setCurrentRow()
  mainTableRef.value.$refs.dataTableRef.clearSelection()
}

defineExpose({
  open
})

// 分页查询商品
const mainTableRef = ref()
const radioIndex = ref<number>(-1)
const queryInfo = reactive({
  code: '',
  category: '',
  isEnable: '1'
})
const { page, search, initIndex } = hooks.useTable((pageNumber: number, pageSize: number) => {
  pageProductInfo({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total

    if (props.multiple) {
      const tempArray = props.defaultValue as Array<string>
      tempArray.forEach((value: any) => {
        const row = page.data.find((item: any) => item.id === value)
        if (!row) return
        mainTableRef.value.$refs.dataTableRef.toggleRowSelection(row, true)
      })
    } else {
      radioIndex.value = page.data.findIndex((item: any) => item.id === props.defaultValue)
    }
  })
})

// 确认
const emits = defineEmits(['apply'])
const apply = function () {
  let selection = []
  if (props.multiple) {
    selection = mainTableRef.value.$refs.dataTableRef.getSelectionRows()
  } else if (radioIndex.value >= 0) {
    selection.push(page.data[radioIndex.value])
  }
  if (selection.length === 0) {
    ElMessage.warning('请选择商品')
    return
  }
  emits('apply', selection)
  close()
}
</script>

<style lang="scss" scoped></style>
